import { ResponseTask } from '@entities/Tasks/model/types/Task'
import { Panel } from '@shared/ui/Panel'
import { RemainingTime } from '@shared/ui/RemainingTime'
import { Moment } from 'moment'
import { ReactNode, memo } from 'react'
import styles from './ListCardView.module.scss'

interface Props {
  dueDate: Moment
  onClick?: () => void
  progress?: number
  renderDeleteBtn?: (task: ResponseTask) => ReactNode
  renderDoneBtn?: (task: ResponseTask) => ReactNode
  renderTags?: (task: ResponseTask) => ReactNode
  subTasks?: ResponseTask[]
  task: ResponseTask
  title: string
}
export const ListCardView = memo(
  ({
    dueDate,
    onClick,
    progress,
    renderDeleteBtn,
    renderDoneBtn,
    renderTags,
    subTasks,
    task,
    title,
  }: Props) => {
    return (
      <Panel className={styles['task-card']} onClick={onClick} pointer withShadow>
        {renderDoneBtn?.(task)}
        <div className={styles['task-text']}>{title}</div>
        <div className={styles['task-info-details']}>{renderTags?.(task)}</div>
        <span>{`${progress}/${subTasks?.length}`}</span>
        <div className={styles['task-ending']}>
          <RemainingTime date={dueDate} />
        </div>
        {renderDeleteBtn?.(task)}
      </Panel>
    )
  },
)
ListCardView.displayName = 'ListCardView'
